<template>
  <a-drawer width="576" :title="formTitle" :label-col="4" :wrapper-col="14" :visible="open" :body-style="{ height: 'calc(100vh - 100px)', overflow: 'auto' }" @close="cancel">
    <a-form-model ref="form" :model="form" :rules="rules" layout="vertical">
      <a-spin :spinning="spinning" :delay="delayTime" tip="Loading...">
        <a-row :gutter="32">
          <a-col :span="12">
            <a-form-model-item label="审核配置名称" prop="name">
              <a-input v-model="form.name" placeholder="请输入审核配置名称" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12" v-if="!modelItemDisabled">
            <a-form-model-item label="审核配置项目" prop="itemId" >
              <select-region v-model="form.itemId" placeholder="请选择审核配置项" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="审核方式" prop="method">
              <a-select
                placeholder="请选择审核方式"
                v-model="form.method"
                :getPopupContainer="
                  triggerNode => {
                    return triggerNode.parentNode || document.body
                  }
                "
                style="width: 100%"
                allow-clear
              >
                <a-select-option v-for="(d, index) in methodOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="审核状态" prop="status">
              <a-radio-group v-model="form.status">
                <a-radio v-for="(dict, index) in statusOptions" :key="index" :value="dict.dictValue">
                  {{ dict.dictLabel }}
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="审核原因" prop="sentence">
              <a-table :columns="columns" :data-source="sentenceList" :scroll="{ y: 200 }" style="width: 100%" rowKey="id" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
                <div class="table-operations" slot="title" style="text-align: right">
                  <a-button type="primary" size="small" @click="addRow"> <a-icon type="plus" />新增 </a-button>
                  <a-button type="danger" v-if="!multiple" @click="batchDedeleteRow"> <a-icon type="delete" />删除 </a-button>
                </div>
                <template slot="value" slot-scope="text, record">
                  <span v-if="!record.editable">
                    {{ text }}
                  </span>
                  <a-input placeholder="请输入" v-model="record.value" v-if="record.editable" style="width: 100%" />
                </template>
                <template slot="operation" slot-scope="text, record">
                  <div v-if="record.editable">
                    <a @click="saveRow(record)">保存</a>
                    <a-divider type="vertical" />
                    <a @click.stop="cancelEditCell(record)">取消</a>
                  </div>
                  <div v-else>
                    <a @click.stop="updateRow(record)">修改</a>
                    <a-divider type="vertical" />
                    <a @click.stop="deleteRow(record)">删除</a>
                  </div>
                </template>
              </a-table>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="32"> </a-row>
      </a-spin>
      <div class="bottom-control">
        <a-space>
          <a-button :disabled="disabled" @click="cancel"> 取消 </a-button>
          <a-button type="primary" :disabled="disabled" @click="submitForm(true)"> 保存 </a-button>
        </a-space>
      </div>
    </a-form-model>
  </a-drawer>
</template>
<script>
import ApproveConfigEditForm from './ApproveConfigForm'
export default {
  ...ApproveConfigEditForm
}
</script>
